<template>
  <div class="export-options">
    <div class="section-header">
      <h2>导出选项</h2>
    </div>

    <el-form label-position="top" class="export-form">
      <el-divider content-position="left">基本设置</el-divider>
      
      <el-form-item label="导出内容">
        <el-radio-group v-model="exportContent">
          <el-radio label="current-page">当前页面</el-radio>
          <el-radio label="all-pages">所有页面</el-radio>
          <el-radio label="selected-pages">选定页面</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item v-if="exportContent === 'selected-pages'" label="选择页面">
        <el-checkbox-group v-model="selectedPages">
          <el-checkbox 
            v-for="page in pages" 
            :key="page.id" 
            :label="page.id"
          >
            {{ page.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      
      <el-form-item label="导出格式">
        <el-radio-group v-model="exportFormat">
          <el-radio label="image">图片</el-radio>
          <el-radio label="pdf">PDF</el-radio>
          <el-radio label="html">HTML</el-radio>
          <el-radio label="code">代码</el-radio>
          <el-radio label="json">JSON</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <template v-if="exportFormat === 'image'">
        <el-form-item label="图片格式">
          <el-select v-model="imageFormat" placeholder="选择图片格式">
            <el-option label="PNG" value="png" />
            <el-option label="JPG" value="jpg" />
            <el-option label="SVG" value="svg" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="图片质量">
          <el-slider v-model="imageQuality" :min="1" :max="10" show-stops />
        </el-form-item>
      </template>
      
      <template v-if="exportFormat === 'html' || exportFormat === 'code'">
        <el-divider content-position="left">代码导出选项</el-divider>
        
        <el-form-item label="代码框架">
          <el-select v-model="codeFramework" placeholder="选择代码框架">
            <el-option label="Vue.js" value="vue" />
            <el-option label="React" value="react" />
            <el-option label="原生HTML/CSS" value="native" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="CSS预处理器">
          <el-select v-model="cssPreprocessor" placeholder="选择CSS预处理器">
            <el-option label="无" value="none" />
            <el-option label="SCSS" value="scss" />
            <el-option label="LESS" value="less" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="导出选项">
          <el-checkbox v-model="includeAssets">包含资源文件</el-checkbox>
          <el-checkbox v-model="includeComments">包含注释</el-checkbox>
          <el-checkbox v-model="prettifyCode">美化代码</el-checkbox>
        </el-form-item>
      </template>
      
      <el-divider content-position="left">输出设置</el-divider>
      
      <el-form-item label="文件名">
        <el-input v-model="fileName" placeholder="设置导出文件名" />
      </el-form-item>
      
      <el-form-item label="导出路径">
        <el-input v-model="exportPath" placeholder="导出文件存储路径">
          <template #append>
            <el-button @click="showFileDialog">浏览...</el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    
    <div class="export-actions">
      <el-button type="primary" @click="exportProject" :loading="exporting">
        <el-icon><Download /></el-icon>
        导出项目
      </el-button>
      <el-button @click="previewExport" :disabled="exporting">
        <el-icon><View /></el-icon>
        预览
      </el-button>
    </div>
    
    <div class="export-history">
      <el-divider content-position="left">导出历史</el-divider>
      
      <el-empty v-if="exportHistory.length === 0" description="暂无导出记录" />
      <el-table v-else :data="exportHistory" style="width: 100%" size="small">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="文件名" width="180" />
        <el-table-column prop="format" label="格式" />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button link @click="downloadExport(scope.row)">下载</el-button>
            <el-button link type="danger" @click="deleteExport(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <el-dialog v-model="previewDialogVisible" title="导出预览" width="800px">
      <div class="preview-content">
        <template v-if="exportFormat === 'image'">
          <img :src="previewImageUrl" alt="导出预览" class="preview-image" />
        </template>
        <template v-else-if="exportFormat === 'html' || exportFormat === 'code'">
          <el-tabs v-model="previewTab">
            <el-tab-pane label="预览" name="preview">
              <iframe :src="previewHtmlUrl" class="preview-iframe"></iframe>
            </el-tab-pane>
            <el-tab-pane label="代码" name="code">
              <pre class="preview-code">{{ previewCode }}</pre>
            </el-tab-pane>
          </el-tabs>
        </template>
        <template v-else>
          <div class="preview-message">
            {{ previewMessage }}
          </div>
        </template>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="previewDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="exportFromPreview">导出</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Download, View } from '@element-plus/icons-vue'

// 导出设置
const exportContent = ref('current-page')
const exportFormat = ref('image')
const imageFormat = ref('png')
const imageQuality = ref(8)
const codeFramework = ref('vue')
const cssPreprocessor = ref('none')
const includeAssets = ref(true)
const includeComments = ref(true)
const prettifyCode = ref(true)
const fileName = ref('ui-prototype')
const exportPath = ref('/exports')

// 页面数据
const pages = ref([
  { id: 1, name: '首页' },
  { id: 2, name: '登录页' },
  { id: 3, name: '个人中心' }
])
const selectedPages = ref([1])

// 导出状态
const exporting = ref(false)
const previewDialogVisible = ref(false)
const previewTab = ref('preview')
const previewImageUrl = ref('')
const previewHtmlUrl = ref('')
const previewCode = ref('')
const previewMessage = ref('')

// 导出历史
const exportHistory = ref([
  {
    id: 1,
    date: '2024-03-25 14:30',
    name: 'ui-prototype.png',
    format: 'PNG',
    path: '/exports/ui-prototype.png'
  },
  {
    id: 2,
    date: '2024-03-24 10:15',
    name: 'login-page.html',
    format: 'HTML',
    path: '/exports/login-page.html'
  }
])

// 导出文件名（带扩展名）
const fullFileName = computed(() => {
  const extensions = {
    'image': imageFormat.value,
    'pdf': 'pdf',
    'html': 'html',
    'code': codeFramework.value === 'vue' ? 'vue' : (codeFramework.value === 'react' ? 'jsx' : 'html'),
    'json': 'json'
  }
  return `${fileName.value}.${extensions[exportFormat.value]}`
})

// 打开文件对话框
const showFileDialog = () => {
  ElMessage.info('在实际应用中，这里会打开一个文件选择对话框')
}

// 导出项目
const exportProject = () => {
  if (!fileName.value) {
    ElMessage.warning('请输入文件名')
    return
  }
  
  exporting.value = true
  
  // 模拟导出过程
  setTimeout(() => {
    const now = new Date()
    exportHistory.value.unshift({
      id: Date.now(),
      date: now.toLocaleString(),
      name: fullFileName.value,
      format: exportFormat.value.toUpperCase(),
      path: `${exportPath.value}/${fullFileName.value}`
    })
    
    exporting.value = false
    ElMessage.success(`项目已成功导出为 ${fullFileName.value}`)
  }, 1500)
}

// 预览导出结果
const previewExport = () => {
  if (!fileName.value) {
    ElMessage.warning('请输入文件名')
    return
  }
  
  // 根据不同格式生成预览内容
  if (exportFormat.value === 'image') {
    previewImageUrl.value = 'https://placeholder.pics/svg/800x600/DEDEDE/555555/预览图片'
  } else if (exportFormat.value === 'html' || exportFormat.value === 'code') {
    previewHtmlUrl.value = 'about:blank' // 实际应用中，这里应该是一个临时生成的HTML文件URL
    
    if (codeFramework.value === 'vue') {
      previewCode.value = `<template>
  <div class="ui-container">
    <header class="header">
      <div class="logo">MyApp Logo</div>
    </header>
    <main class="content">
      <h1>欢迎使用我们的应用</h1>
      <p>这是一个示例页面预览，展示了原型设计的实时效果。</p>
      
      <div class="feature-list">
        <div class="feature-item">
          <h2>功能一</h2>
          <p>功能描述...</p>
        </div>
        <div class="feature-item">
          <h2>功能二</h2>
          <p>功能描述...</p>
        </div>
        <div class="feature-item">
          <h2>功能三</h2>
          <p>功能描述...</p>
        </div>
      </div>
    </main>
  </div>
</template>

<style ${cssPreprocessor.value !== 'none' ? `lang="${cssPreprocessor.value}"` : ''}>
.ui-container {
  font-family: 'Microsoft YaHei', sans-serif;
  color: #303133;
}

.header {
  height: 60px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.content {
  padding: 20px;
}

.feature-list {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.feature-item {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 20px;
  flex: 1;
}
</style>`
    } else if (codeFramework.value === 'react') {
      previewCode.value = `import React from 'react';
import './styles.css';

function MyApp() {
  return (
    <div className="ui-container">
      <header className="header">
        <div className="logo">MyApp Logo</div>
      </header>
      <main className="content">
        <h1>欢迎使用我们的应用</h1>
        <p>这是一个示例页面预览，展示了原型设计的实时效果。</p>
        
        <div className="feature-list">
          <div className="feature-item">
            <h2>功能一</h2>
            <p>功能描述...</p>
          </div>
          <div className="feature-item">
            <h2>功能二</h2>
            <p>功能描述...</p>
          </div>
          <div className="feature-item">
            <h2>功能三</h2>
            <p>功能描述...</p>
          </div>
        </div>
      </main>
    </div>
  );
}

export default MyApp;`
    } else {
      previewCode.value = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UI原型</title>
  <style>
    body {
      font-family: 'Microsoft YaHei', sans-serif;
      margin: 0;
      padding: 0;
    }
    
    .ui-container {
      color: #303133;
    }
    
    .header {
      height: 60px;
      background-color: #ffffff;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }
    
    .content {
      padding: 20px;
    }
    
    .feature-list {
      display: flex;
      gap: 20px;
      margin-top: 20px;
    }
    
    .feature-item {
      background-color: #ffffff;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      padding: 20px;
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="ui-container">
    <header class="header">
      <div class="logo">MyApp Logo</div>
    </header>
    <main class="content">
      <h1>欢迎使用我们的应用</h1>
      <p>这是一个示例页面预览，展示了原型设计的实时效果。</p>
      
      <div class="feature-list">
        <div class="feature-item">
          <h2>功能一</h2>
          <p>功能描述...</p>
        </div>
        <div class="feature-item">
          <h2>功能二</h2>
          <p>功能描述...</p>
        </div>
        <div class="feature-item">
          <h2>功能三</h2>
          <p>功能描述...</p>
        </div>
      </div>
    </main>
  </div>
</body>
</html>`
    }
  } else if (exportFormat.value === 'pdf') {
    previewMessage.value = 'PDF预览暂不可用。导出后可在PDF查看器中打开查看。'
  } else if (exportFormat.value === 'json') {
    previewMessage.value = 'JSON格式包含项目原始数据，可用于项目备份或迁移。'
  }
  
  previewDialogVisible.value = true
}

// 从预览窗口导出
const exportFromPreview = () => {
  previewDialogVisible.value = false
  exportProject()
}

// 下载历史导出
const downloadExport = (item) => {
  ElMessage.success(`正在下载: ${item.name}`)
}

// 删除历史导出
const deleteExport = (item) => {
  ElMessageBox.confirm(
    `确定要删除导出文件 "${item.name}" 吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    exportHistory.value = exportHistory.value.filter(h => h.id !== item.id)
    ElMessage.success('导出文件已删除')
  }).catch(() => {})
}
</script>

<style scoped>
.export-options {
  padding: 16px;
  overflow-y: auto;
  height: 100%;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.export-form {
  margin-bottom: 24px;
}

.export-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.export-history {
  margin-top: 24px;
}

.preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.preview-image {
  max-width: 100%;
  max-height: 400px;
  border: 1px solid #ebeef5;
}

.preview-iframe {
  width: 100%;
  height: 400px;
  border: 1px solid #ebeef5;
}

.preview-code {
  width: 100%;
  height: 400px;
  overflow: auto;
  background-color: #f5f7fa;
  padding: 16px;
  border-radius: 4px;
  font-family: monospace;
  white-space: pre-wrap;
  margin: 0;
}

.preview-message {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
  color: #606266;
  text-align: center;
}
</style> 